<template>
  <a-modal
    title="新建人员"
    :width="1080"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    @cancel="handleCancel"
    okText="确认"
    cancelText="取消"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-row :gutter="12">
          <a-col :md="8" :sm="24">
            <a-form-item
              label="身份号"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-input
                v-decorator="['personCard', {rules: [{ required: true, message: '请输入身份号', trigger: 'blur' }]}]" />
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item
              label="姓名"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-input v-decorator="['personName', {rules: [{required: true, message: '请输入姓名', trigger: 'blur'}]}]" />
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item
              label="曾用名"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-input v-decorator="['personUsedName']" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="12">
          <a-col :md="8" :sm="24">
            <a-form-item
              label="性别"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              :required="true"
            >
              <a-radio-group v-decorator="['personSex', {initialValue: '男', rules: [{required: true, message: '请输入性别', trigger: 'blur'}]}]" >
                <a-radio :value="'男'">男</a-radio>
                <a-radio :value="'女'">女</a-radio>
              </a-radio-group>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item
              label="类别"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              :required="true"
            >
              <a-select v-decorator="['personType', {rules: [{required: true, message: '请选择类别' }]}]" placeholder="请选择类别">
                <a-select-option value="军官">军官</a-select-option>
                <a-select-option value="军士">军士</a-select-option>
                <a-select-option value="兵">兵</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item
              label="部别"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-tree-select
                v-decorator="['unitId', {rules: [{required: true, message: '请选择部别'}]}]"
                style="width: 100%"
                :tree-data="treeData"
                :dropdown-style="{ maxHeight: '300px', overflow: 'auto' }"
                placeholder="请选择"
                allow-clear
                :treeDefaultExpandedKeys="expandedKeys"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="12">
          <a-col :md="8" :sm="24">
            <a-form-item
              label="部职别"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-input
                v-decorator="['personJobTitle', {rules: [{ required: true, message: '请输入部职别', trigger: 'blur' }]}]" />
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item
              label="任现职时间"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-date-picker v-decorator="['personTenure', {rules: [{required: true, message: '请选择'}]}]" style="width: 100%"/>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item
              label="身份证号"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-input
                v-decorator="['personIdcard', {rules: [{ required: true, message: '请输入身份证号', trigger: 'blur' }]}]" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="12">
          <a-col :md="8" :sm="24">
            <a-form-item
              label="民族"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-select v-decorator="['personNation', {rules: [{ required: true, message: '请选择民族' }]}]" placeholder="请选择民族">
                <a-select-option value="汉族">汉族</a-select-option>
                <a-select-option value="蒙古族">蒙古族</a-select-option>
                <a-select-option value="回族">回族</a-select-option>
                <a-select-option value="藏族">藏族</a-select-option>
                <a-select-option value="维吾尔族">维吾尔族</a-select-option>
                <a-select-option value="苗族">苗族</a-select-option>
                <a-select-option value="彝族">彝族</a-select-option>
                <a-select-option value="壮族">壮族</a-select-option>
                <a-select-option value="布依族">布依族</a-select-option>
                <a-select-option value="朝鲜族">朝鲜族</a-select-option>
                <a-select-option value="满族">满族</a-select-option>
                <a-select-option value="侗族">侗族</a-select-option>
                <a-select-option value="瑶族">瑶族</a-select-option>
                <a-select-option value="白族">白族</a-select-option>
                <a-select-option value="土家族">土家族</a-select-option>
                <a-select-option value="哈尼族">哈尼族</a-select-option>
                <a-select-option value="哈萨克族">哈萨克族</a-select-option>
                <a-select-option value="傣族">傣族</a-select-option>
                <a-select-option value="黎族">黎族</a-select-option>
                <a-select-option value="傈僳族">傈僳族</a-select-option>
                <a-select-option value="佤族">佤族</a-select-option>
                <a-select-option value="畲族">畲族</a-select-option>
                <a-select-option value="高山族">高山族</a-select-option>
                <a-select-option value="拉祜族">拉祜族</a-select-option>
                <a-select-option value="水族">水族</a-select-option>
                <a-select-option value="东乡族">东乡族</a-select-option>
                <a-select-option value="纳西族">纳西族</a-select-option>
                <a-select-option value="景颇族">景颇族</a-select-option>
                <a-select-option value="柯尔克孜族">柯尔克孜族</a-select-option>
                <a-select-option value="土族">土族</a-select-option>
                <a-select-option value="达斡尔族">达斡尔族</a-select-option>
                <a-select-option value="仫佬族">仫佬族</a-select-option>
                <a-select-option value="羌族">羌族</a-select-option>
                <a-select-option value="布朗族">布朗族</a-select-option>
                <a-select-option value="撒拉族">撒拉族</a-select-option>
                <a-select-option value="毛南族">毛南族</a-select-option>
                <a-select-option value="仡佬族">仡佬族</a-select-option>
                <a-select-option value="锡伯族">锡伯族</a-select-option>
                <a-select-option value="阿昌族">阿昌族</a-select-option>
                <a-select-option value="普米族">普米族</a-select-option>
                <a-select-option value="塔吉克族">塔吉克族</a-select-option>
                <a-select-option value="怒族">怒族</a-select-option>
                <a-select-option value="乌孜别克族">乌孜别克族</a-select-option>
                <a-select-option value="俄罗斯族">俄罗斯族</a-select-option>
                <a-select-option value="鄂温克族">鄂温克族</a-select-option>
                <a-select-option value="德昂族">德昂族</a-select-option>
                <a-select-option value="保安族">保安族</a-select-option>
                <a-select-option value="裕固族">裕固族</a-select-option>
                <a-select-option value="京族">京族</a-select-option>
                <a-select-option value="塔塔尔族">塔塔尔族</a-select-option>
                <a-select-option value="独龙族">独龙族</a-select-option>
                <a-select-option value="鄂伦春族">鄂伦春族</a-select-option>
                <a-select-option value="赫哲族">赫哲族</a-select-option>
                <a-select-option value="门巴族">门巴族</a-select-option>
                <a-select-option value="珞巴族">珞巴族</a-select-option>
                <a-select-option value="基诺族">基诺族</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item
              label="出生年月"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-date-picker v-decorator="['personBirthdate', {rules: [{ required: true, message: '请选择'}]}]" style="width: 100%"/>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item
              label="入伍年月"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-date-picker v-decorator="['personEnlistmentDate', {rules: [{required: true, message: '请选择'}]}]" style="width: 100%"/>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="12">
          <a-col :md="8" :sm="24">
            <a-form-item
              label="政治面貌"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-select v-decorator="['personPoliticsStatus', {rules: [{ required: true, message: '请选择政治面貌' }]}]" placeholder="请选择政治面貌" @change="handleChangePolitics">
                <a-select-option value="中共党员">中共党员</a-select-option>
                <a-select-option value="中共预备党员">中共预备党员</a-select-option>
                <a-select-option value="共青团员">共青团员</a-select-option>
                <a-select-option value="民革党员">民革党员</a-select-option>
                <a-select-option value="民盟盟员">民盟盟员</a-select-option>
                <a-select-option value="民建会员">民建会员</a-select-option>
                <a-select-option value="民进会员">民进会员</a-select-option>
                <a-select-option value="农工党党员">农工党党员</a-select-option>
                <a-select-option value="致公党党员">致公党党员</a-select-option>
                <a-select-option value="九三学社社员">九三学社社员</a-select-option>
                <a-select-option value="台盟盟员">台盟盟员</a-select-option>
                <a-select-option value="无党派人士">无党派人士</a-select-option>
                <a-select-option value="群众">群众</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item
              label="入党团时间"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
                    <div v-if="this.isPolitics">
                      <a-date-picker disabled v-decorator="['personPartyTime']" style="width: 100%"/>
                    </div>
                    <div v-else>
                      <a-date-picker v-decorator="['personPartyTime']" style="width: 100%"/>
                    </div>

            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item
              label="军衔"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-select v-decorator="['personMilitaryRank', {rules: [{ required: true, message: '请选择军衔' }]}]" placeholder="请选择军衔">
                <a-select-option value="列兵">列兵</a-select-option>
                <a-select-option value="上等兵">上等兵</a-select-option>
                <a-select-option value="下士">下士</a-select-option>
                <a-select-option value="中士">中士</a-select-option>
                <a-select-option value="上士">上士</a-select-option>
                <a-select-option value="四级军士长">四级军士长</a-select-option>
                <a-select-option value="三级军士长">三级军士长</a-select-option>
                <a-select-option value="二级军士长">二级军士长</a-select-option>
                <a-select-option value="一级军士长">一级军士长</a-select-option>
                <a-select-option value="少尉">少尉</a-select-option>
                <a-select-option value="中尉">中尉</a-select-option>
                <a-select-option value="上尉">上尉</a-select-option>
                <a-select-option value="少校">少校</a-select-option>
                <a-select-option value="中校">中校</a-select-option>
                <a-select-option value="上校">上校</a-select-option>
                <a-select-option value="大校">大校</a-select-option>
                <a-select-option value="少将">少将</a-select-option>
                <a-select-option value="中将">中将</a-select-option>
                <a-select-option value="上将">上将</a-select-option>
                <a-select-option value="其它">其它</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="12">
          <a-col :md="8" :sm="24">
            <a-form-item
              label="现军衔时间"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-date-picker v-decorator="['personMilitaryRankTime', {rules: [{required: true, message: '请选择'}]}]" style="width: 100%"/>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item
              label="职级"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-select v-decorator="['personRank', {rules: [{required: true, message: '请选择职级' }]}]" placeholder="请选择职级" @change="handleChange">
                <a-select-option value="无">无</a-select-option>
                <a-select-option value="排职">排职</a-select-option>
                <a-select-option value="连级副职">连级副职</a-select-option>
                <a-select-option value="连级正职">连级正职</a-select-option>
                <a-select-option value="营级副职">营级副职</a-select-option>
                <a-select-option value="营级正职">营级正职</a-select-option>
                <a-select-option value="团级副职">团级副职</a-select-option>
                <a-select-option value="团级正职">团级正职</a-select-option>
                <a-select-option value="师级副职">师级副职</a-select-option>
                <a-select-option value="师级正职">师级正职</a-select-option>
                <a-select-option value="军级副职">军级副职</a-select-option>
                <a-select-option value="军级正职">军级正职</a-select-option>
                <a-select-option value="战区级副职">战区级副职</a-select-option>
                <a-select-option value="战区级正职">战区级正职</a-select-option>
                <a-select-option value="初职">初职</a-select-option>
                <a-select-option value="中职">中职</a-select-option>
                <a-select-option value="副高职">副高职</a-select-option>
                <a-select-option value="正高职">正高职</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item
              label="现职级时间"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <div v-if="this.isShow">
                <a-date-picker disabled v-decorator="['personRankTime']" style="width: 100%"/>
              </div>
              <div v-else>
                <a-date-picker v-decorator="['personRankTime']" style="width: 100%"/>
              </div>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="12">
          <a-col :md="8" :sm="24">
            <a-form-item
              label="文化程度"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-select v-decorator="['personEduLevel', {rules: [{ required: true, message: '请选择文化程度' }]}]" placeholder="请选择文化程度">
                <a-select-option value="初中">初中</a-select-option>
                <a-select-option value="高中">高中</a-select-option>
                <a-select-option value="中专">中专</a-select-option>
                <a-select-option value="大专">大专</a-select-option>
                <a-select-option value="本科">本科</a-select-option>
                <a-select-option value="硕士">硕士</a-select-option>
                <a-select-option value="博士">博士</a-select-option>
                <a-select-option value="博士后">博士后</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item
              label="是否婚恋"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              :required="true"
            >
              <a-select v-decorator="['personMarriageStatus', {rules: [{ required: true, message: '请选择婚恋情况' }]}]" placeholder="请选择婚恋情况">
                <a-select-option value="恋爱">恋爱</a-select-option>
                <a-select-option value="已婚">已婚</a-select-option>
                <a-select-option value="未婚">未婚</a-select-option>
                <a-select-option value="离异">离异</a-select-option>
                <a-select-option value="丧偶">丧偶</a-select-option>
                <a-select-option value="再婚">再婚</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item
              label="籍贯"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-input
                v-decorator="['personNativePlace', {rules: [{ required: true, message: '请输入籍贯', trigger: 'blur' }]}]" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="12">
          <a-col :md="8" :sm="24">
            <a-form-item
              label="家庭电话"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-input
                v-decorator="['personHomePhone', {rules: [{ required: true, message: '请输入家庭电话', trigger: 'blur' }]}]" />
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item
              label="出生地"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-input
                v-decorator="['personBirthplace', {rules: [{ required: true, message: '请输入出生地', trigger: 'blur' }]}]" />
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item
              label="入伍地"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-input v-decorator="['personEnlistmentPlace', {rules: [{required: true, message: '请输入入伍地', trigger: 'blur'}]}]" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="12">
          <a-col :md="8" :sm="24">
            <a-form-item
              label="QQ及Email"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-input v-decorator="['personQqEmail', {rules: [{required: true, message: '请输入QQ及Email', trigger: 'blur'}]}]" />
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item
              label="手机号码"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-input v-decorator="['personPhone', {rules: [{required: true, message: '请输入手机号码', trigger: 'blur'}]}]" />
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item
              label="邮政编码"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
            >
              <a-input
                v-decorator="['personPostcode', {rules: [{ required: true, message: '请输入邮政编码', trigger: 'blur' }]}]" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :md="24" :sm="24">
            <a-form-item
              label="家庭地址"
              :labelCol="labelCol3"
              :wrapperCol="wrapperCol3"
            >
              <a-input v-decorator="['personHomeAddr', {rules: [{required: true, message: '请输入家庭地址', trigger: 'blur'}]}]" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import { addSoldier } from '@/api/basic/soldier'
import { listUnitTree } from '@/api/basic/unit'
import { TreeSelect } from 'ant-design-vue'

export default {
  components: {
    ATreeSelect: TreeSelect
  },
  data () {
    return {
      treeData: [],
      isShow: false,
      isPolitics: false,
      expandedKeys: [1],
      labelCol: {
        xs: { span: 24 },
        sm: { span: 9 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 13 }
      },
      labelCol3: {
        xs: { span: 24 },
        sm: { span: 3 },
        md: { span: 3 }
      },
      wrapperCol3: {
        xs: { span: 24 },
        sm: { span: 20 },
        md: { span: 20 }
      },
      visible: false,
      confirmLoading: false,
      personRank: '',

      form: this.$form.createForm(this)
    }
  },
  created () {
    listUnitTree()
      .then(res => {
        if (res.message !== 'error') {
          this.treeData = res.result
        } else {
          this.$message.error('操作失败！')
        }
      })
  },
  methods: {
    add () {
      this.visible = true
    },
    handleChange (value) {
      if (value === '无') {
        this.isShow = true
      } else {
        this.isShow = false
      }
    },
    handleChangePolitics (value) {
      if (value === '群众') {
        this.isPolitics = true
      } else {
        this.isPolitics = false
      }
    },
    handleSubmit () {
      const { form: { validateFields } } = this
      this.confirmLoading = true
      validateFields((errors, values) => {
        this.personRank = values.personRank[0]
        if (!errors) {
          if (this.personRank === '无') {
            values.personRankTime = null
          }
          if (this.personPoliticsStatus === '群众') {
            values.personPartyTime = null
          }
          addSoldier(Object.assign(values, { 'personRank': this.personRank }))
            .then(res => {
              if (res.message !== 'error') {
                this.visible = false
                this.confirmLoading = false
                this.form.resetFields()
                this.$emit('ok')
              } else {
                this.confirmLoading = false
                this.$message.error('操作失败！')
              }
            })
        } else {
          this.confirmLoading = false
        }
      })
    },
    handleCancel () {
      this.form.resetFields()
      this.visible = false
    }
  }
}
</script>
